//  动力环境-传感器
<template>
  <div class="userBox" id="uploadtu3">
    <div class="bg-fff">
      <el-form class="pAll" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" v-loading="loading">
        <el-row style="border-top: 1px solid #f2f2f2; padding-top: 25px">
          <el-col :span="2">
            <span class="title">资产信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资产名称:" prop="ZCMC">
              <el-input v-model.trim="ruleForm.ZCMC" clearable placeholder="资产名称"></el-input>
            </el-form-item>
            <el-form-item label="串口号:" prop="com">
              <el-input v-model.trim="ruleForm.com" :maxlength="3" clearable placeholder="串口号"></el-input>
            </el-form-item>
            <el-form-item label="地址码:" prop="slaveId">
              <el-input v-model.trim="ruleForm.slaveId" :maxlength="3" clearable placeholder="地址码"></el-input>
            </el-form-item>
            <el-form-item label="波特率:" prop="baudRate">
              <el-select v-model.trim="ruleForm.baudRate" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in baudRateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="校验位:" prop="parity">
              <el-select v-model.trim="ruleForm.parity" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in parityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据位:" prop="dataBits">
              <el-select v-model.trim="ruleForm.dataBits" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in dataBitsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="停止位:" prop="stopBits">
              <el-select v-model.trim="ruleForm.stopBits" clearable filterable placeholder="请选择/搜索" class="inputSelect">
                <el-option v-for="item in stopBitsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="辖区(安装地址):" prop="XQBM">
              <el-cascader
                v-show="showcity"
                v-model.trim="ruleForm.XQBM"
                ref="cascaderList"
                class="inputSelect"
                style="margin-right: 10px"
                clearable
                @change="handleChange"
                @visible-change="visibleChange"
                :props="{
                  lazy: true,
                  lazyLoad: lazyLoadAdd,
                }"
              ></el-cascader>
              <el-input v-show="!showcity" v-model="xianxidizhi" class="inputSelect" disabled style="margin-right: 10px"></el-input>
              <el-button class="btnSizeStyle" type="primary" plain size="small" @click="selectCity">选择</el-button>
            </el-form-item>
            <el-form-item label="详细地址:">
              <el-input type="textarea" :rows="4" resize="none" show-word-limit :maxlength="100" v-model.trim="ruleForm.XXDZ" placeholder="请输入设备安装详细地址信息"></el-input>
            </el-form-item>
            <el-form-item label="资产状态:" prop="type">
              <el-radio-group v-model.trim="ruleForm.ZCZT">
                <el-radio label="1">使用中</el-radio>
                <el-radio label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="资产图片:">
              <el-upload
                action="#"
                list-type="picture-card"
                ref="upload"
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                :auto-upload="false"
                :on-change="lalal"
                :file-list="fileList"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <span class="el-upload__tip">只能上传jpg/png文件，且不超过2M</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="2">
            <span class="title">厂家信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产厂家:" prop="CJ">
              <el-select @change="xzpp" v-model.trim="ruleForm.CJ" :no-data-text="tiText3" clearable filterable placeholder="选择厂家" class="inputSelect">
                <el-option v-for="item in cjOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="品牌:" prop="PP">
              <el-select v-model.trim="ruleForm.PP" :no-data-text="tiText4" clearable :disabled="ruleForm.CJ === '' ? true : false" filterable placeholder="品牌" class="inputSelect">
                <el-option v-for="item in ppmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="型号:" prop="XH">
              <el-input v-model.trim="ruleForm.XH" clearable placeholder="型号"></el-input>
            </el-form-item>
            <el-form-item label="出厂日期:">
              <el-date-picker v-model="ruleForm.CCRQ" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="inputSelect"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="维保期限:" prop="BXQ">
              <el-input-number v-model.trim="ruleForm.BXQ" placeholder="请输入" controls-position="right" :min="0" :max="5 * 12" size="medium"></el-input-number>
              <span style="margin-left: 10px">个月</span>
            </el-form-item>
            <el-form-item label="设备序列码:" prop="SBXLH" class="shebeima">
              <el-input v-model.trim="ruleForm.SBXLH" clearable placeholder="设备序列码" @focus="saveBtnDisable = true" @blur="deviceBlur"></el-input>
            </el-form-item>
            <el-form-item label="设备编码:" prop="SBBM">
              <el-input v-model.trim="ruleForm.SBBM" clearable placeholder="设备编码"></el-input>
            </el-form-item>
            <el-form-item label="国标编码:" prop="GBBM">
              <el-input v-model.trim="ruleForm.GBBM" clearable placeholder="国标编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px">
          <el-col :span="2">
            <span class="title">其他信息：</span>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属合同:">
              <el-select v-model.trim="ruleForm.HT_ID" :no-data-text="tiText1" clearable filterable placeholder="资产所属合同" class="inputSelect">
                <el-option v-for="item in hetonOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="承建单位:">
              <el-select v-model.trim="ruleForm.CJDW" :no-data-text="tiText2" clearable filterable placeholder="选择承建单位" class="inputSelect">
                <el-option v-for="item in jgOptions2" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="安装时间:">
              <el-date-picker v-model.trim="ruleForm.AZRQ" :picker-options="pickerBeginDateBefore" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" class="inputSelect"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="2">
            <el-form-item label="使用单位:" prop="SYDW">
              <el-select v-model.trim="ruleForm.SYDW" :no-data-text="tiText2" disabled placeholder="使用单位" class="inputSelect3">
                <el-option v-for="item in jgOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运维单位:">
              <el-select v-model.trim="ruleForm.YWDW" :no-data-text="tiText2" clearable filterable placeholder="选择运维单位" class="inputSelect">
                <el-option v-for="item in jgOptions3" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <el-button class="btnSizeStyle" size="medium" @click="goBack">取消</el-button>
          <el-button class="btnSizeStyle" type="primary" :loading="saveBtnLoad" :disabled="saveBtnDisable" size="medium" @click="baoCun('ruleForm')" v-preventReClick>保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { linkageCity } from '@/utils/linkageCity.js'
import { ziC, pinT, upload } from '@/utils/allUrl.js'
import { startLoading, endLoading } from '@/utils/loading.js'
import { timeLoad } from '@/assets/js/setTime'
export default {
  props: ['zclxForm'],
  data: function () {
    // 串口码验证规则
    var validateNum = (rule, value, callback) => {
      if (value < 0 || value > 255) {
        callback(new Error('请输入0, 255之间的数字'))
      } else {
        callback()
      }
    }
    return {
      // 修改资产ID
      xiuID: '',
      // 品牌
      ppmcOptions: [],
      // 合同
      hetonOptions: [],
      // 机构
      jgOptions: [],
      // 承建
      jgOptions2: [],
      // 运维
      jgOptions3: [],
      // 厂家
      cjOptions: [],
      baudRateOptions: [
        {
          value: 9600,
          label: '9600',
        },
        {
          value: 14400,
          label: '14400',
        },
        {
          value: 19200,
          label: '19200',
        },
        {
          value: 38400,
          label: '38400',
        },
        {
          value: 57600,
          label: '57600',
        },
        {
          value: 115200,
          label: '115200',
        },
        {
          value: 128000,
          label: '128000',
        },
      ],
      // 校验位
      parityOptions: [
        {
          value: 0,
          label: 'NONE',
        },
        {
          value: 1,
          label: 'ODD',
        },
        {
          value: 2,
          label: 'EVEN',
        },
        {
          value: 3,
          label: 'MARK',
        },
        {
          value: 4,
          label: 'SPACE',
        },
      ],
      // 数据位
      dataBitsOptions: [
        {
          value: 5,
          label: '5',
        },
        {
          value: 6,
          label: '6',
        },
        {
          value: 7,
          label: '7',
        },
        {
          value: 8,
          label: '8',
        },
      ],
      // 停止位
      stopBitsOptions: [
        {
          value: 1,
          label: '1',
        },
        {
          value: 3,
          label: '1.5',
        },
        {
          value: 2,
          label: '2',
        },
      ],
      // 加载
      loading: false,
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      ruleForm: {
        SBXLH: '', // 设备序列码
        ZCMC: '', // 资产名称
        CJ: '', // 厂家
        PP: '', // 品牌
        XH: '', // 型号
        XQBM: '', // 辖区编码
        XXDZ: '', // 详细地址
        CCRQ: '', // 出场日期
        AZRQ: '', // 安装日期
        ZCZT: '1', // 资产状态
        GBBM: '', // 国标编码
        SBBM: '', // 设备编码
        SYDW: '', // 使用单位
        CJDW: '', // 承建单位
        YWDW: '', // 运维单位
        HT_ID: '', // 所属合同
        BXQ: 0, // 维保期
        com: '', // 串口号
        slaveId: '', // 地址码
        baudRate: 9600, // 波特率
        parity: 0, // 校验位
        dataBits: 8, // 数据位
        stopBits: 1, // 停止位
      },
      rules: {
        SBXLH: [
          // { required: true, message: '此次为必填项', trigger: 'blur' },
          // { pattern: /^[A-Za-z0-9-_]+$/, message: '请输入数字或者字母', trigger: 'blur' }
        ],
        ZCMC: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { max: 255, message: '长度在 255 个字符之间', trigger: 'blur' },
        ],
        com: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' },
        ],
        slaveId: [
          { required: true, message: '此次为必填项', trigger: 'blur' },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' },
          { validator: validateNum, trigger: 'blur' },
        ],
        XQBM: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        SYDW: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        CJ: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        PP: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        XH: [{ required: true, message: '此次为必填项', trigger: 'blur' }],
        SBBM: [{ pattern: /^[A-Za-z0-9-_]+$/, message: '请输入数字或者字母', trigger: 'blur' }],
        GBBM: [{ pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }],
        BXQ: [{ pattern: /^-?[0-9]\d*$/, message: '不能输入小数', trigger: 'blur' }],
        baudRate: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        parity: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        dataBits: [{ required: true, message: '此次为必填项', trigger: 'change' }],
        stopBits: [{ required: true, message: '此次为必填项', trigger: 'change' }],
      },
      title: '添加资产', // 标题
      //  图片上传
      imgUrl: [],
      fileList: [], // 上传图片列表
      dialogVisible: false,
      dialogImageUrl: '', // 预览
      xianxidizhi: '', // 字符串地址信息
      showcity: false, // 选择辖区
      xqbmValue: '',
      diziValue: '',
      tiText1: '暂无数据', // 合同提示
      tiText2: '暂无数据', // 机构提示
      tiText3: '暂无数据', // 厂家提示
      tiText4: '暂无数据', // 品牌提示
      saveBtnLoad: false, // 保存loading 防止重复点击
      saveBtnTime: null,
      saveBtnDisable: false, // 没有验证序列号禁灰
      dataList: {}, // 保存所有数据
    }
  },
  created: function () {
    // 获取合同
    this.getht()
    // 获取机构
    this.getjg()
    // 获取厂家
    this.getcj()
    // 运维单位
    this.yunwei()
    // 承建单位
    this.chengjian()
  },
  watch: {
    zclxForm: {
      deep: true,
      handler(newVal, oldVal) {
        if (this.title === '编辑资产') {
          //   this.sxjyz(newVal.ZCLX)
        }
      },
    },
    saveBtnLoad(newVal, oldVal) {
      this.saveBtnTime = setTimeout(() => {
        if (this.saveBtnLoad) {
          this.saveBtnLoad = false
        }
      }, timeLoad)
    }, // 保存
  },
  mounted() {
    const { title, content } = this.$route.query
    if (!this.ruleForm.SYDW) {
      this.ruleForm.SYDW = JSON.parse(getUrl('userconter')).zzjg_ID
    }
    this.title = title
    if (content) {
      this.xiuID = content
      this.setList(content, true)
    } else {
      this.ruleForm.XQBM = JSON.parse(getUrl('userconter')).xqbm
    }
  },
  methods: {
    // 设备序列码失去焦点
    async deviceBlur() {
      if (this.ruleForm.SBXLH === '') {
        this.saveBtnDisable = false
        return
      }
      const params = new URLSearchParams()
      params.append('SBXLH', this.ruleForm.SBXLH)
      params.append('type', this.$route.query.type) // type 1 新增 2 修改
      if (this.$route.query.type === 2) {
        params.append('serialNo', this.dataList.serialNo)
      }
      const { data: res } = await this.$http.post(`${ziC}assets/verificationSerialNumber`, params)
      switch (res.code) {
        case '0000':
          this.saveBtnDisable = false
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    // 转换时间格式
    detaTiem(value) {
      if (value) {
        const dt = new Date(value)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, 0)
        const d = (dt.getDate() + '').padStart(2, 0)
        return `${y}-${m}-${d}`
      } else {
        return ''
      }
    },
    async lazyLoadAdd(node, resolve) {
      const user = JSON.parse(getUrl('userconter'))
      if (node.level === 0) {
        return resolve(await linkageCity(user.id, node.level + 1))
      } else if (node.level === 1) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 2) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value))
      } else if (node.level === 3) {
        return resolve(await linkageCity(user.id, node.level + 1, node.value, node.label))
      }
    },
    handleChange(e) {
      this.$nextTick(() => {
        const vals = this.$refs.cascaderList.presentText
        if (vals) {
          this.xianxidizhi = vals
        } else {
          this.xianxidizhi = this.diziValue
        }
        if (e.length === 0) {
          this.showcity = false
          this.ruleForm.XQBM = this.xqbmValue
        }
      })
    },
    // 获取编辑资产数据
    async setList(id, type) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectByID`, params)
      if (res.code === '0000') {
        const xiucontent = res.data
        this.dataList = res.data
        this.getpp(xiucontent.cj)
        // 获取品牌
        if (xiucontent.zzzp) {
          const cao = xiucontent.zzzp.replace(/uid/g, 'name')
          this.fileList = JSON.parse(cao)
          this.imgUrl = this.fileList
        }
        this.xianxidizhi = xiucontent.sfmc + ' / ' + xiucontent.csmc + ' / ' + xiucontent.qxmc + ' / ' + xiucontent.xzjdmc
        this.xqbmValue = xiucontent.ssq_NO - ''
        this.diziValue = this.xianxidizhi
        if (type) {
          this.ruleForm = {
            SBXLH: xiucontent.sbxlh,
            ZCMC: xiucontent.zcmc,
            CJ: xiucontent.cj - '',
            PP: xiucontent.pp_ID,
            XH: xiucontent.xh,
            XQBM: xiucontent.ssq_NO - '',
            XXDZ: xiucontent.xxdz || '',
            CCRQ: this.detaTiem(xiucontent.ccrq),
            AZRQ: this.detaTiem(xiucontent.azrq),
            ZCZT: xiucontent.zczt,
            GBBM: xiucontent.gbbm || '',
            SBBM: xiucontent.sbbm || '',
            BXQ: xiucontent.bxq,
            SYDW: xiucontent.sydw,
            CJDW: xiucontent.cjdw === 0 ? '' : xiucontent.cjdw,
            YWDW: xiucontent.ywdw === 0 ? '' : xiucontent.ywdw,
            HT_ID: xiucontent.ht_ID === 0 ? '' : xiucontent.ht_ID,
            com: xiucontent.com || '',
            slaveId: xiucontent.slaveId + '',
            baudRate: xiucontent.baudRate === 0 ? 9600 : xiucontent.baudRate,
            parity: xiucontent.parity === 0 ? 0 : xiucontent.parity,
            dataBits: xiucontent.dataBits === 0 ? 8 : xiucontent.dataBits,
            stopBits: xiucontent.stopBits === 0 ? 1 : xiucontent.stopBits,
          }
        }
      } else {
        this.ruleForm = {
          SBXLH: '',
          ZCMC: '',
          CJ: '',
          PP: '',
          XH: '',
          XQBM: '',
          XXDZ: '',
          CCRQ: '',
          AZRQ: '',
          ZCZT: '',
          GBBM: '',
          SBBM: '',
          BXQ: '',
          SYDW: '',
          CJDW: '',
          YWDW: '',
          HT_ID: '',
          com: '',
          slaveId: '',
          baudRate: 9600,
          parity: 0,
          dataBits: 8,
          stopBits: 1,
        }
        this.tableMessage = res.message
      }
    },
    // 获取合同
    async getht() {
      const { data: res } = await this.$http.post(`${pinT}htgl/list`)
      const arr = []
      if (res.code !== '0000') {
        this.hetonOptions = []
        this.tiText1 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.htmc,
          }
          arr.push(k)
        })
        this.hetonOptions = arr
      }
    },
    xzpp(val) {
      this.ruleForm.PP = ''
      this.getpp(val)
    },
    // 获取品牌
    async getpp(id) {
      const params = new URLSearchParams()
      params.append('SCCJ', id)
      const { data: res } = await this.$http.post(`${ziC}pp/list`, params)
      const arr = []
      if (res.code !== '0000') {
        this.ppmcOptions = []
        this.tiText4 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.ppmc,
          }
          arr.push(k)
        })
        this.ppmcOptions = arr
      }
    },
    // 获取机构
    async getjg() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      const arr = [] // 全部
      if (res.code !== '0000') {
        this.jgOptions = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k)
        })
        this.jgOptions = arr
      }
    },
    async yunwei() {
      const params = new URLSearchParams()
      params.append('jglx', 4)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = [] // 运维
      if (res.code !== '0000') {
        this.jgOptions3 = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k2 = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k2)
        })
        this.jgOptions3 = arr
      }
    },
    async chengjian() {
      const params = new URLSearchParams()
      params.append('jglx', 3)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = [] // 承建
      if (res.code !== '0000') {
        this.jgOptions2 = []
        this.tiText2 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k3 = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k3)
        })
        this.jgOptions2 = arr
      }
    },
    // 获取厂家
    async getcj() {
      // 业主 45
      // 生产 6
      // 承建 3
      // 运营 4
      // 第三方承建  5
      const params = new URLSearchParams()
      params.append('jglx', 6)
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`, params)
      const arr = []
      if (res.code !== '0000') {
        this.cjOptions = []
        this.tiText3 = res.message
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.jgmc,
          }
          arr.push(k)
        })
        this.cjOptions = arr
      }
    },
    // 删除图片
    handleRemove(a) {
      const index = this.imgUrl.findIndex((item) => item.uid === a.uid)
      this.imgUrl.splice(index, 1)
    },
    // 添加图片
    async lalal(el) {
      let videoSize = el.size / (1024 * 1024) // 转成M格式
      videoSize = videoSize.toFixed(1) // 保留小数点后一位
      if (videoSize > 2) {
        const dele = this.$refs.upload.uploadFiles
        const index = dele.findIndex((item) => item.uid === el.uid)
        dele.splice(index, 1)
        // this.$refs.upload.uploadFiles
        return this.$message({
          type: 'error',
          message: '图片超过最大限制2M',
          center: true,
        })
      } else {
        startLoading(document.getElementById('uploadtu3'))
        const file = el.raw
        const fd = new FormData()
        let arr = {}
        fd.append('file', file) // 传文件
        fd.append('type', 0) // 传文件
        const { data: res } = await this.$http.post(`${upload}`, fd)
        endLoading()
        if (res.code === '0000') {
          res.data.forEach((item) => {
            arr = {
              uid: el.uid,
              url: item,
            }
          })
          this.imgUrl.push(arr)
        } else {
          return this.$message({
            type: 'error',
            message: res.message,
            center: true,
          })
        }
      }
    },
    // 预览
    handlePictureCardPreview(e) {
      this.dialogImageUrl = e.url
      this.dialogVisible = true
    },
    baoCun(ruleForm) {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          clearTimeout(this.saveBtnTime)
          this.saveBtnLoad = true
          if (this.title === '添加资产') {
            const { SBXLH, ZCMC, CJ, PP, XH, XQBM, XXDZ, CCRQ, AZRQ, ZCZT, GBBM, SBBM, BXQ, SYDW, CJDW, YWDW, HT_ID, com, slaveId, baudRate, parity, dataBits, stopBits } = this.ruleForm
            const params = new URLSearchParams()
            params.append('ZCLX', this.zclxForm.ZCLX[this.zclxForm.ZCLX.length - 1] || 0)
            params.append('SBXLH', SBXLH)
            params.append('ZCMC', ZCMC)
            params.append('CJ', CJ)
            params.append('PP_ID', PP)
            params.append('XH', XH)
            params.append('XXDZ', XXDZ)
            params.append('CCRQ', CCRQ)
            params.append('AZRQ', AZRQ)
            params.append('ZCZT', ZCZT)
            params.append('GBBM', GBBM)
            params.append('SBBM', SBBM)
            params.append('BXQ', BXQ || 0)
            params.append('SYDW', SYDW || 0)
            params.append('CJDW', CJDW || 0)
            params.append('YWDW', YWDW || 0)
            params.append('imgs', JSON.stringify(this.imgUrl))
            params.append('HT_ID', HT_ID || 0)
            params.append('com', com || '')
            params.append('slaveId', slaveId || 0)
            params.append('baudRate', baudRate || 0)
            params.append('parity', parity || 0)
            params.append('dataBits', dataBits || 0)
            params.append('stopBits', stopBits || 0)
            if (XQBM.length === 3) {
              params.append('SF', XQBM[0])
              params.append('CS', XQBM[1])
              params.append('QX', XQBM[2])
              params.append('SSQ_NO', XQBM[2])
            } else if (XQBM.length === 4) {
              params.append('SF', XQBM[0])
              params.append('CS', XQBM[1])
              params.append('QX', XQBM[2])
              params.append('XZJD', XQBM[3])
              params.append('SSQ_NO', XQBM[3])
            }
            const { data: res } = await this.$http.post(`${ziC}zcgl/insertZiChan`, params)
            this.saveBtnLoad = false
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          } else {
            const { SBXLH, ZCMC, CJ, PP, XH, XQBM, XXDZ, CCRQ, AZRQ, ZCZT, GBBM, SBBM, BXQ, SYDW, CJDW, YWDW, HT_ID, com, slaveId, baudRate, parity, dataBits, stopBits } = this.ruleForm
            const params2 = new URLSearchParams()
            if (typeof this.zclxForm.ZCLX !== 'number') {
              params2.append('ZCLX', this.zclxForm.ZCLX[this.zclxForm.ZCLX.length - 1] || 0)
            } else {
              params2.append('ZCLX', this.zclxForm.ZCLX || 0)
            }
            params2.append('ID', this.xiuID)
            params2.append('SBXLH', SBXLH)
            params2.append('ZCMC', ZCMC)
            params2.append('CJ', CJ)
            params2.append('PP_ID', PP)
            params2.append('XH', XH)
            params2.append('XXDZ', XXDZ)
            params2.append('CCRQ', CCRQ)
            params2.append('AZRQ', AZRQ)
            params2.append('ZCZT', ZCZT)
            params2.append('GBBM', GBBM)
            params2.append('SBBM', SBBM)
            params2.append('BXQ', BXQ || 0)
            params2.append('SYDW', SYDW || 0)
            params2.append('CJDW', CJDW || 0)
            params2.append('YWDW', YWDW || 0)
            params2.append('imgs', JSON.stringify(this.imgUrl))
            params2.append('HT_ID', HT_ID || 0)
            params2.append('com', com || '')
            params2.append('slaveId', slaveId || 0)
            params2.append('baudRate', baudRate || 0)
            params2.append('parity', parity || 0)
            params2.append('dataBits', dataBits || 0)
            params2.append('stopBits', stopBits || 0)
            if (typeof XQBM !== 'number') {
              if (XQBM.length === 3) {
                params2.append('SF', XQBM[0])
                params2.append('CS', XQBM[1])
                params2.append('QX', XQBM[2])
                params2.append('SSQ_NO', XQBM[2])
              } else if (XQBM.length === 4) {
                params2.append('SF', XQBM[0])
                params2.append('CS', XQBM[1])
                params2.append('QX', XQBM[2])
                params2.append('XZJD', XQBM[3])
                params2.append('SSQ_NO', XQBM[3])
              }
            } else {
              const s = (XQBM + '').substr(0, 2) + '0000'
              const c = (XQBM + '').substr(0, 4) + '00'
              const x = (XQBM + '').substr(0, 6)
              params2.append('SF', s)
              params2.append('CS', c)
              params2.append('QX', x)
              if ((XQBM + '').length > 6) {
                params2.append('XZJD', XQBM)
                params2.append('SSQ_NO', XQBM)
              } else {
                params2.append('SSQ_NO', x)
              }
            }
            const { data: res } = await this.$http.post(`${ziC}zcgl/updateZiChan`, params2)
            this.saveBtnLoad = false
            if (res.code === '0014') {
              return ''
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.goBack()
          }
        } else {
          return this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
        }
      })
    },
    goBack: function () {
      // this.$router.push('/propertyList')
      this.$router.push({
        name: 'propertyList',
        params: {
          pingpai: this.$route.query.pingpai, // 品牌
          zicanglx: this.$route.query.zicanglx, // 资产类型
          zicanZT: this.$route.query.zicanZT, // 资产状态
          azTime: this.$route.query.azTime, // 安装时间
          sous: this.$route.query.sous, // 资产名称/ip/sn号
          // currentPage: this.$route.query.currentPage, // 当前页
          // pageSize: this.$route.query.pageSize, // 页码
        },
      })
    },
    selectCity() {
      this.showcity = true
      this.$refs.cascaderList.toggleDropDownVisible()
    },
    visibleChange(val) {
      if (!val) {
        this.showcity = false
      }
    },
    validateNum(rule, value, callback) {
      if (value < 0 || value > 255) {
        callback(new Error('请输入0, 255之间的数字'))
      } else {
        callback()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .inputSelect3 .el-input__suffix {
  opacity: 0;
}
.userBox {
  .el-row {
    border-bottom: 1px solid #f2f2f2;
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
    .el-form-item {
      .inputSelect {
        width: 260px;
      }
      .inputSelect2 {
        width: 390px;
      }
      .inputSelect3 {
        width: 260px;
      }
      .jinDuTitle {
        height: 18px;
        line-height: 22px;
        color: #c0c4cc;
      }
      .iconBtn {
        margin-left: 10px;
        font-size: 15px;
        color: rgba(187, 187, 187, 1);
        cursor: pointer;
      }
      .DuFen {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .btnGs {
          margin: 0 10px;
        }
      }
      .el-upload__tip {
        font-size: 12px;
        color: #a1a3a8;
        margin-top: 7px;
        padding-left: 10px;
      }
    }
    .pilian_btn {
      position: relative;
      width: 258%;
      top: -25px;
      left: 65px;
      padding: 0 18px;
      background-color: #fffbe6;
      > div {
        height: 30px;
        line-height: 30px;
        color: #e28b02;
        .xiaBtn {
          padding: 0;
        }
      }
    }
    .konBox {
      height: 68px;
    }
    .shebeima {
      padding: 0;
      margin-bottom: 10px;
    }
    .shebeima2 {
      padding: 0;
      margin: 0;
    }
  }
  .fooer_btn {
    margin: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
